@import "~./atlantic/zul/less/_header.less";

.z-slider {
	background-image: none;

	&-center {
		cursor: pointer;
	}

	&-button {
		.size(@iconWidth, @iconHeight);
		background: @sliderButtonBackground;
		position: relative;
		cursor: pointer;
	}

	&-horizontal {
		height: @barHeight;
		padding: (@barHeight - @baseHeight) / 2 0;

		.z-slider-center {
			.size(100%, @baseHeight);
			background: @sliderBackground;
		}

		.z-slider-button {
			top: (@baseHeight - @iconHeight) / 2;
		}
	}

	&-vertical {
		width: @barWidth;
		padding: 0 (@barWidth - @baseWidth) / 2;

		.z-slider-center {
			.size(@baseWidth, 100%);
			background: @sliderBackground;
		}

		.z-slider-button {
			left: (@baseWidth - @iconWidth) / 2;
		}
	}

	&-sphere {
		.z-slider-vertical .z-slider-button {
			bottom: 0;			
		}
	}

	&-sphere,
	&-scale {
		.z-slider-button {
			.borderRadius(@iconHeight / 2);
		}
	}

	&-scale {
		.encodeThemeURL(background, '~./zul/img/slider/ticks.gif', no-repeat);
	}

	&-popup {
		.fontStyle(@contentFontFamily, @baseFontSize, @baseFontWeight, @baseTextColor);
		border: 1px solid @baseBorderColor;
		padding: @paddingSmall;
		background: @baseBackground;
		position: absolute;
		z-index: 60000;
	}
}
